<!-- 菜单的自动构建 在src/components/menu/Menu.vue中使用 -->
<template>
  <template v-for="route in routers">

    <template slot="title" v-if="route.level === 0">
      <template slot="title" v-if="route.rootMenu">
        <el-header class="menuHeader">

        
        <el-row class="center" type="flex" justify="center" align="middle">
          <el-icon style="width: 40px;height: 40px;" ><component :is="route.meta.icon" style="width: 100%;height: 100%; color: #ffffff;"></component></el-icon>
        <el-text class="mx-1 menuHeaderText" type="info" size="large">
          &numsp;{{ route.meta.title }} 
          </el-text>
        
     
      </el-row>

        </el-header>


        <el-menu default-active={{route.defaultPath}} class="el-menu-vertical-demo" @open="handleOpen"
          @close="handleClose" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" router="true">
          <sub-menu :routers=route.children :fatherPath=route.path />
        </el-menu>
      </template>
    </template>

    <template v-else-if="route.level == 1">
      <!-- 一级菜单 -->
      <el-sub-menu :index='fatherPath + route.path'>
        <template v-slot:title>
          <i class="el-icon-location"> <el-icon>
              <component :is="route.meta.icon" style="width: 16px;height: 16px;"></component>
            </el-icon></i>

          <span>{{ route.meta.title }}</span>
        </template>

        <!-- 子菜单 -->
        <template v-if="route.children.length > 0">
          <sub-menu :routers="route.children" :fatherPath="fatherPath + route.path" />
        </template>

      </el-sub-menu>
    </template>

    <!-- 二级菜单 -->
    <template v-else-if="route.level == 2">

      <!-- 有子菜单 -->
      <template v-if="route.children">

        <el-sub-menu :index='fatherPath + route.path'>
          <template v-slot:title>
            <el-icon>
                <component :is="route.meta.icon" style="width: 16px;height: 16px;"></component>
              </el-icon>

            <span>{{ route.meta.title }}</span>
          </template>
          <!-- 子菜单 -->
          <template v-if="route.children">
            <sub-menu :routers="route.children" :fatherPath="fatherPath + route.path" />
          </template>
        </el-sub-menu>

      </template>
      <!-- 没有子菜单 -->
      <template v-else>
        <el-menu-item :index='route.path'>

          <el-icon>
              <component :is="route.meta.icon" style="width: 16px;height: 16px;"></component>
            </el-icon>

          <span>{{ route.meta.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </template>
</template>

<script>


export default {
  name: 'sub-menu',
  props: {
    routers: {
      type: Array,
      default: () => {
        return []
      },
      level: { type: Number },
      children: {
        type: Array,
        default: () => {
          return []
        }
      }
    },

    fatherPath: { type: String },

  }

}
</script>
  
<style>

</style>